body{
    margin: 0;
    padding: 0;/*移除外边距和内边距*/
}
nav{
    position: fixed;
    display: flex;/*设置为弹性容器*/
    justify-content: space-around;/*间隔一直*/
    align-items: center;/*垂直居中*/
    width: 100vw;
    height: 70px;
    top: 0px;
    background-color: rgb(232, 165, 73);
    overflow: hidden;/*超出隐藏*/
    font-size: 20px;/*字体大小*/
    color: rgb(220, 237, 37);
    opacity: 0.8;/*透明度*/
    z-index: 1000;/*优先显示*/
}
.homenav{
    animation: load2 1s linear;
    /*
        动画效果：执行 load2动画，持续1s，linear无速度变化
    */
}
.homenav{
    animation: load2 1s linear;
    /*
        动画效果：执行 load2动画，持续1s，linear无速度变化
    */
}
@keyframes load2{
    0%{
        top: -80px;
        opacity: 0;
    }100%{
        top: 0px;
        opacity: 0.8;
    }
}
nav .navtitle{
    padding-left: 4%;
    width: 30%px;
}
nav .navtitle strong{
    font-size: 50px;
    font-weight: bolder;
}
nav a{
    display: block;/*块级元素，与其他并排显示，而不是独占一行*/

    text-decoration: none;/*去掉下划线*/
    z-index: 1;/*堆叠顺序*/
    height: inherit;/*继承父元素nav的高度*/
    line-height: 70px;/*文本行高度*/
    width: 8%;
    text-align: center;
    font-weight: bolder;
    color: rgb(234, 47, 34);
    transition: 0.5s;/*渐变*/
 }
 nav .navanim{
    position: absolute;
    height: inherit;
    z-index: 0;
    background: rgb(248, 241, 114);
    border-radius: 5px;/*添加了圆角边框。所有四个角的半径都被设置为 5 像素*/
    left: -500px;
    transition:  all .5s ease 0s;/*五秒，ease慢快慢 0延迟*/
    width: 8%;
}
nav .home,a:nth-child(2):hover~.navanim{
    width: 8%;
    left: 27%;
}

nav .popular,a:nth-child(3):hover~.navanim{
    width: 8%;
    left: 36%;
}

nav .new,a:nth-child(4):hover~.navanim{
    width: 8%;
    left: 45%;
}

nav .cuisine,a:nth-child(5):hover~.navanim{
    width: 8%;
    left: 54%;
}
nav .denglu,a:nth-child(6):hover~.navanim{
    width: 8%;
    left: 63%;
}
nav .lianxi,a:nth-child(7):hover~.navanim{
    width: 8%;
    left:  72%;
}
nav .none{
    width: 18%;
}

